<!-- 菜单管理 -->
<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-table
      border
      style="margin-bottom: 20px"
      :data="PermissionList"
      :expand-row-keys="expandKeys"
      row-key="id"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />

      <el-table-column prop="toCode" label="跳转权限值" />

      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            :disabled="row.level === 4"
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="toAddPermission(row)"
            :title="getAddTitle(row.level)"
          />

          <el-button
            type="primary"
            icon="el-icon-edit-outline"
            size="small"
            :disabled="row.level === 1"
            @click="toUpdatePermission(row)"
            :title="row.level === 4 ? '修改功能' : '修改菜单'"
          />

          <el-button
            :disabled="row.level === 1"
            type="danger"
            icon="el-icon-delete"
            size="small"
            @click="removePermission(row)"
            title="删除"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      @close="resetData"
    >
      <el-form
        ref="permissionRef"
        :model="permission"
        :rules="permissionRules"
        label-width="120px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="permission.name" />
        </el-form-item>

        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="permission.code" />
        </el-form-item>

        <el-form-item
          label="跳转路由权限值"
          prop="toCode"
          v-if="permission.level === 4"
        >
          <el-input v-model="permission.toCode" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="resetData">取 消</el-button>
        <el-button type="primary" @click="addOrUpdatePermission"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  reqGetPermissionList,
  reqSaveOrUpdatePermissionApi,
  reqDelPermission,
} from "@/api/acl/permission";
export default {
  name: "permission",
  data() {
    return {
      PermissionList: [],
      multipleSelection: [],
      expandKeys: [],
      dialogVisible: false,
      permissionRef: "",
      permission: {
        // 要操作的菜单权限对象
        code: "",
        id: "",
        level: 0,
        name: "",
        pid: "",
        select: true,
        // status: 0,
        toCode: "",
        type: 0,
      },
      permissionRules: {
        name: [{ required: true, message: "名称必须输入", trigger: "blur" }],
        code: [{ required: true, message: "权限值必须输入", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 获取角色列表
    async GetPermissionList() {
      const PermissionList = await reqGetPermissionList();
      // console.log(PermissionList);
      this.PermissionList = PermissionList.data.children;
    },
    toAddPermission(row) {
      // console.log(row);
      this.permission.pid = row.id;
      this.permission.level = row.level+1
      this.dialogVisible = true;
    },
    getAddTitle(level) {
      if (level === 1 || level === 2) {
        return "添加菜单";
      } else if (level === 3) {
        return "添加功能";
      }
    },
    // 重置数据
    resetData() {
      this.dialogVisible = false;
      Object.assign(this.permission, {
        // Object.assign：合并对象，具有响应式功能
        type: 1,
        level: 0,
        name: "",
        code: "",
        toCode: "",
        pid: "",
      });
    },
    // 修改菜单
    toUpdatePermission(permission) {
      this.permission = { ...permission };
      this.dialogVisible = true;
    },
    // 删除菜单
    async removePermission(row) {
      try {
        await reqDelPermission(row.id);
        this.$message.success("删除成功");
        this.GetPermissionList();
      } catch (e) {
        this.$message.error("删除失败" + e.message);
      }
    },
    // 添加/修改菜单 点击确定的回调
    async addOrUpdatePermission() {
      const { id } = this.permission;
      try {
        console.log(this.permission, 111);
        await reqSaveOrUpdatePermissionApi(this.permission);
        this.$message.success(`${id ? "修改" : "添加"}成功!`);
        // ElMessage.success(`${id ? "修改" : "添加"}成功!`);
        this.GetPermissionList();
      } catch (e) {
        this.$message.error("失败" + e.message);
      }
      this.dialogVisible = false;
    },
  },
  mounted() {
    this.GetPermissionList();
  },
  computed: {
    dialogTitle() {
      const { id, level } = this.permission;
      if (id) {
        console.log(level)
        return level === 4 ? "修改功能" : "修改菜单";
      } else {
        return level === 4 ? "添加功能" : "添加菜单";
      }
    },
  },
};
</script>

<style scoped></style>
